<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	a{
		color: black;
		text-decoration: none;
	}
	div{
		background-color: #F5F5F5; 
		width: 320px;
		height: 480px;
		margin: 0 auto;
		text-align: center;
	}
	p{
		line-height: 50px;
	}
	input{
		width: 100px;
	}
	#getyzm{
		width: 70px;
		display: inline-block;
	}
	#number,#password{
		margin-left: -80px;
	}
    #return{
        margin-left: -300px;
        font-size: 25px;
    }
	</style>
</head>
<body>
<div>
	<form action="index.html">
    <p><a href="phoneLogin.html" id="return"><</a></p>
    <p id="number">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:
		<input type="text" required="required" placeholder="请输入手机号" pattern="^1[3456789]\d{9}$">
    </p>
    <p>验&nbsp;证&nbsp;码:
        <input type="text" required=required placeholder="请输入验证码" pattern="^\d{4}$">
        <input type="button" value="获取验证码" id="getyzm">
    </p>
    <p>
        <a href="index.html">
            <input type="submit" value="登录" />
        </a>
	</p>
</form>
</div>
</body>
<script>
	var getyzm=document.getElementById("getyzm");
	var num=30;
	getyzm.onclick=function(){            
		setInterval(function(){
			if(num>=0){
				getyzm.disabled="disabled";
				getyzm.value=num+"秒";
				num--;
			}else{
				getyzm.disabled=false;
				getyzm.value="获取验证码";
			}
		},1000);
	}
</script>
</html>
